<template>
  <div class="content-container">
    <div class="header-content">
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <Banner />
    <div class="gap"></div>
    <ShowProduct
      :title="this.titles[0]"
      :data="newPhones"
      class="Phone"
      :typeName="this.typeName[0]"
    />
    <div class="gap"></div>
    <ShowProduct
      :title="this.titles[1]"
      :data="computer"
      :typeName="this.typeName[1]"
    />
    <div class="gap"></div>
    <ShowProduct
      :title="this.titles[2]"
      :data="earPhone"
      :typeName="this.typeName[2]"
    />
    <div class="gap"></div>
    <ShowProduct :title="titles[3]" :data="pad" :typeName="this.typeName[3]" />
  </div>
</template>

<script>
import Banner from "../Phone/Banner/index.vue";
import ShowProduct from "../../components/ShowProduct.vue";
import { getProducts } from "@/api/getProducts";
export default {
  components: {
    Banner,
    ShowProduct,
  },
  data() {
    return {
      newPhones: [],
      computer: [],
      pad: [],
      earPhone: [],
      typeName: ["phone", "computer", "earPhone", "pad"],
      titles: ["手机", "电脑", "耳机", "平板"],
    };
  },
  mounted() {
    getProducts().then((res) => {
      let phones = res.data.data;
      for (let i = 0; i < 6; i++) {
        this.newPhones.push(phones[i]);
      }

      for (let i = 0; i < phones.length; i++) {
        if (phones[i].categoryId === "2") {
          if (this.computer.length < 6) {
            this.computer.push(phones[i]);
          }
        }
        if (phones[i].categoryId === "3") {
          if (this.pad.length < 6) {
            this.pad.push(phones[i]);
          }
        }
        if (phones[i].categoryId === "4") {
          if (this.earPhone.length < 6) {
            this.earPhone.push(phones[i]);
          }
        }
      }
    });
  },
};
</script>

<style lang='less' scoped>
.content-container {
  width: 70%;
  margin: 0 auto;
  border-radius: 15px;
  background-color: #ffffff;
  .header-content {
    height: 40px;
    width: 100%;
    background-color: #f5f5f5;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    display: flex;
    align-items: center;
    ul {
      display: flex;
      justify-content: space-around;
      width: 80px;
      padding: 0;
      margin-left: 10px;
      li:nth-child(1) {
        background-color: #ff4d63;
      }
      li:nth-child(2) {
        background-color: #f5c250;
      }
      li:nth-child(3) {
        background-color: #0092ff;
      }
    }
    ul > li {
      width: 15px;
      height: 15px;
      list-style: none;
      //   background-color: #d7d7d7;
      border-radius: 50%;
      cursor: pointer;
    }
  }
}
.gap {
  height: 100px;
}
.Phone {
  margin-top: 400px;
}
</style>